import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal, Row, Col, Input, Button, Table,
} from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

interface WhiteListProps extends FormComponentProps {
  dispatch?: Dispatch;
  courierInfo?: any;
  addVisible: boolean;
  cabinetId: number;
  changeAdd: (addVisible: boolean) => void;
  location?: { query: any };
}

interface WhiteListState {
  phone: any;
  pageIndex: number;
  pageSize: number;
}

@connect(({
  deliveryWhiteList: { courierInfo },
}: any) => ({ courierInfo }))

class WhiteList extends Component<WhiteListProps, WhiteListState> {
  state: WhiteListState = {
    phone: '',
    pageIndex: 1,
    pageSize: 5,
  }

  columns = [
    { title: '快递员姓名', dataIndex: 'name' },
    { title: '快递员手机号', dataIndex: 'phone' },
    {
      title: '操作',
      dataIndex: 'id',
      render: (val: any, record: any) => (
        <>
          {
            record.exist
              ? '--'
              : (
                <span
                  className="operLink"
                  onClick={() => this.handleAdd(val)}
                >
                  添加
                </span>
              )
          }
        </>
      ),
    },
  ]

  handleAdd = (uid: number) => {
    const { cabinetId } = this.props;
    const params = {
      cabinetId,
      uid,
    };

    this.fetchAction('addCourier', params);
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const {
      cabinetId,
      form: { validateFields },
    } = this.props;
    validateFields((errors, { phone }) => {
      if (!errors) {
        const { pageSize } = this.state;
        const params = {
          phone,
          cabinetId,
          pageIndex: 1,
          pageSize,
        };

        this.setState({
          phone,
          pageIndex: 1,
        }, () => this.fetchAction('fetchOtherCourier', params));
      }
    });
  }

  handleCancel = () => {
    const {
      changeAdd,
      form: { resetFields },
    } = this.props;

    this.setState({
      pageIndex: 1,
      pageSize: 5,
      phone: '',
    }, () => {
      changeAdd(false);
      resetFields();
    });
  }

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { phone } = this.state;
    const { cabinetId } = this.props;

    const params = {
      cabinetId,
      phone,
      pageIndex,
      pageSize,
    };

    this.setState({
      pageIndex,
      pageSize,
    }, () => this.fetchAction('fetchOtherCourier', params));
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch }: any = this.props;
    const type = `deliveryWhiteList/${typeName}`;
    dispatch({ type, payload });
  }

  render() {
    const { pageIndex, pageSize } = this.state;

    const {
      addVisible,
      courierInfo,
      form: { getFieldDecorator },
    } = this.props;

    const dataSource = courierInfo ? courierInfo.list : [];
    const pagination: object = {
      total: courierInfo ? courierInfo.count : 0,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['5', '10'],
      showTotal: () => `共${courierInfo.count || 0}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    return (
      <Modal
        title="添加可配置快递员"
        visible={addVisible}
        width={800}
        footer={null}
        onCancel={this.handleCancel}
      >
        <Form className="tableListForm marginB20" onSubmit={this.handleSearch}>
          <Row gutter={{ md: 12, xl: 24, lg: 48 }}>
            <Col md={12} sm={24}>
              <Form.Item label="快递员手机号" colon={false}>
                {getFieldDecorator('phone')(
                  <Input allowClear maxLength={11} placeholder="请输入快递员手机号" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24} className="paddingL20">
              <Button type="primary" htmlType="submit" className="smallButton">查询</Button>
            </Col>
          </Row>
        </Form>
        <Table
          rowKey="id"
          className="statementTable"
          columns={this.columns}
          dataSource={dataSource}
          pagination={pagination}
        />
      </Modal>
    );
  }
}

export default Form.create<WhiteListProps>()(WhiteList);
